<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, reactive, ref, nextTick } from 'vue';
import { Search, EditPen, User } from '@element-plus/icons-vue';
import { useDictionaryStore } from '@/store';
import { StaffAPI } from '@/api';

const pagination = reactive({
    total: 0, currentPage: 1
});
const newList = ref<Vm.Dictionary[]>([]);
const isEdit = ref<boolean>(false);
const dictionaryStore = useDictionaryStore();
const searchModel = reactive<HttpPayload.Staff>({
    stf_name: "", stf_category: 0, begin: 0, pageSize: 5
});
const model = reactive({
    stf_id: 0, stf_name: "", stf_category: 0, stf_remark: ""
});
const formLabelWidth = '70px';

const userList = ref<Vm.Staff[]>([]);

const getData = async (fromPage1 = true) => {
    if (fromPage1) pagination.currentPage = 1;
    searchModel.begin = (pagination.currentPage - 1) * searchModel.pageSize;
    try {
        const { total, list } = await StaffAPI.get(searchModel);
        if (total > 0 && list.length === 0) {
            pagination.currentPage = Math.ceil(total / searchModel.pageSize);
            getData(false);
            return;
        }
        pagination.total = total;
        userList.value = list;
    } catch (e) { console.log(e); }
};

onMounted(async () => {
    try {
        await dictionaryStore.init();
        dictionaryStore.list.forEach((item: Vm.Dictionary) => { if (item.dic_group_key === 'staff_category') newList.value.push(item) })
        await getData();
    } catch (e) { console.log(e) }
});

const getIndex = (rowIndex: number) => {
    return (pagination.currentPage - 1) * searchModel.pageSize + rowIndex + 1;
};

const add = () => {
    model.stf_id = 0;
    model.stf_name = "";
    model.stf_category = 0;
    model.stf_remark = "";
    nextTick(() => isEdit.value = true);
}

const update = (item: Vm.Staff) => {
    model.stf_id = item.stf_id;
    model.stf_name = item.stf_name;
    model.stf_category = item.stf_category;
    model.stf_remark = item.stf_remark;
    nextTick(() => isEdit.value = true);
};

const remove = async (staff: Vm.Staff) => {
    try {
        if (staff.stf_invalid === 1) {
            await ElMessageBox.confirm(
                `确定"${staff.stf_name}"离职？`,
                "Tip",
                {
                    showClose: false, type: 'warning',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }
            );
            //离职
            await StaffAPI.dimission(staff.stf_id);
            staff.stf_invalid = 0;
            ElMessage({ message: `"${staff.stf_name}"操作成功！`, type: 'success' });
        }
        else {
            await ElMessageBox.confirm(
                `确定"${staff.stf_name}"入职？`,
                "Tip",
                {
                    showClose: false, type: 'warning',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }
            );
            //入职
            await StaffAPI.reinstate(staff.stf_id);
            staff.stf_invalid = 1;
            ElMessage({ message: `"${staff.stf_name}"操作成功！`, type: 'success' });
        }
    } catch (e) { console.log(e) }
};

const save = async () => {
    try {
        if (model.stf_id === 0) {
            await StaffAPI.add(model);
        } else {
            await StaffAPI.update(model);
        }
        ElMessage({
            message: '操作成功！',
            type: 'success'
        });
        isEdit.value = false;
    } catch (e) { console.log(e) }
}
</script>

<template>
    <el-container>
        <el-header height="50px">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="用户姓名:">
                    <el-input placeholder="请输入内容..." :prefix-icon="Search" v-model="searchModel.stf_name"
                        @change="getData()">
                    </el-input>
                </el-form-item>
                <el-form-item label="用户角色:">
                    <el-select v-model="searchModel.stf_category" @change="getData()">
                        <el-option :value="0" label="- 请选择 -"></el-option>
                        <el-option v-for="item in newList" :key="item.dic_id" :value="item.dic_id"
                            :label="item.dic_name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="add" style="width: 100px">＋新增</el-button>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main>
            <el-table :data="userList" stripe border width="100%" height="500">
                <el-table-column type="index" :index="getIndex" label="#" width="70" align="center">
                </el-table-column>
                <el-table-column prop="stf_name" label="姓名" width="180" align="center" />
                <el-table-column prop="stf_category" label="职务类型" width="180" align="center">
                    <template #default="{ row }">
                        <span v-if="row.stf_category">{{  dictionaryStore.list.find(item => item.dic_id ===
                        row.stf_category)?.dic_name}}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="stf_remark" label="备注" />
                <el-table-column prop="stf_invalid" label="员工状态" width="180" align="center">
                    <template #default="{ row }">
                        <span style="color: #67c23a" v-if="row.stf_invalid">在职</span>
                        <span style="color: red" v-else>离职</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center">
                    <template #default="{ row }">
                        <el-button type="success" size="large" :icon="EditPen" @click="update(row)">编辑
                        </el-button>
                        <el-button v-if="row.stf_invalid === 1" type="danger" size="large" :icon="User"
                            @click="remove(row)">离职</el-button>
                        <el-button v-else type="warning" size="large" :icon="User" @click="remove(row)">入职</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-dialog :model-value="isEdit" title="员工编辑" width="30%" draggable>
            <el-form-item label="员工姓名" :label-width="formLabelWidth">
                <el-input v-model="model.stf_name" autocomplete="on" />
            </el-form-item>
            <el-form-item label="员工类型" :label-width="formLabelWidth">
                <el-select v-model="model.stf_category" @change="getData()">
                    <el-option :value="0" label="-请选择-"></el-option>
                    <el-option v-for="item in newList" :key="item.dic_id" :value="item.dic_id" :label="item.dic_name">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="员工备注">
                <el-input placeholder="请输入内容" autocomplete="on" type="textarea" v-model="model.stf_remark" />
            </el-form-item>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isEdit = false">取消</el-button>
                    <el-button type="primary" @click="save">保存</el-button>
                </span>
            </template>
        </el-dialog>
        <el-footer height="36px">
            <el-pagination background layout="prev, pager, next, jumper,->, sizes, total " :total="pagination.total"
                v-model:page-size="searchModel.pageSize" v-model:current-page="pagination.currentPage"
                :page-sizes="[3, 6, 9, 12]" @current-change="getData(false)" />
        </el-footer>
    </el-container>
</template>

<style scoped>
.el-container {
    margin: 5px 10px;
}

.el-header {
    height: 50px
}
</style>